<template>
  <div class="app-container">
    <el-form :model="form" :rules="rules" label-width="120px" ref="specForm">
      <el-form-item label="规格名称" prop="title">
        <el-input v-model="form.title" style="width:220px" placeholder="规格名 如:颜色" />
      </el-form-item>
      <el-form-item label="展示方式" prop="show_type">
        <el-radio-group v-model="form.show_type">
          <el-radio  :label="1">文字</el-radio>
          <el-radio  :label="2">颜色</el-radio>
          <el-radio  :label="3">图片</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="form.sort" type="number" placeholder="排序" style="width:220px" />
      </el-form-item>

      <el-form-item label="说明" prop="explain">
        <el-input v-model="form.explain" placeholder="规格说明" type="textarea" style="width:320px" />
      </el-form-item>

      <el-form-item
          v-for="(name, index) in form.spec_name"
          :key="name.key"
          label="规格值"
          :prop="name.value"
        >
          <el-col >
            <el-input  size="medium" placeholder="规格项 如:红色" v-model="name.value" style="width:140px;"></el-input>
             &nbsp;
            <el-input  size="medium" placeholder="排序值 如:1" v-model="name.sort" style="width:120px"></el-input>
             &nbsp;
            <el-button @click.prevent="removeName(name)"  size="medium">删除</el-button>
            </el-col>
        </el-form-item>
      <el-form-item>
          <el-button @click="addName" size="mini" icon="el-icon-plus">新增规格值</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit('specForm')" size="small">提 交</el-button>
        <el-button @click="onCancel()" size="small">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {createBaseSpec,updateBaseSpec,detailBaseSpec} from '@/api/goods/baseSpec'
export default {
  data() {
    return {
      form: {
        title: '',
        show_type: '',
        spec_name: [],
        spec_sort: '',
        sort: '',
        explain: '',
      },
      rules:{
        title:[{required: true, message: '名称不能为空', trigger: 'blur' }],
        show_type:[{required: true, message: '请选择类型', trigger: 'blur' }],
      }
    }
  },
  beforeMount() {
    let id = this.$route.params.id || 0;
    if(id > 0){
      detailBaseSpec(id).then(response => {
        this.form = response.data
        let _spec_name = [];
        response.data.spec_value.map(v=>{
          _spec_name.push({id:v.id,value:v.title,sort:v.sort,key:v.id})
        })
        this.form.spec_name = _spec_name;
      })
    }
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid)=>{
        if (valid) {
          this.checkSpec()
          let id = this.$route.params.id || 0;
          if(id > 0){
            updateBaseSpec(this.form).then(response => {
              if(response.code == 200){
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                setTimeout(()=>{
                  this.$router.push({name:'baseSpec'});
                }, 200)
              }
            })
          }else{
            createBaseSpec(this.form).then(response => {
              if(response.code == 200){
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                setTimeout(()=>{
                  this.$router.push({name:'baseSpec'});
                }, 200)
              }
            })
          }
        }
      })
    },
    checkSpec(){
      let _spec_name = this.form.spec_name
      if (!_spec_name || _spec_name.length<1) {
        this.$message({
          message: '规格值不能为空',
          type: 'warning'
        })
        return false;
      }
      let _name = []
      let _empty = false
      _spec_name.map(v=>{_name.push(v.value);if(v.value == '' || !v.value){_empty = true}})

      if(_name.length < 1 || _empty){
        this.$message({
          message: '规格值不能为空',
          type: 'warning'
        })
        return false;
      }else{
        console.log(_name)
      }
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    addName() {
      this.form.spec_name.push({
        id:0,
        value: '',
        sort: '',
        key: Date.now()
      });
    },
    removeName(item) {
      var index = this.form.spec_name.indexOf(item)
      if (index !== -1) {
        this.form.spec_name.splice(index, 1)
      }
    },
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
  .app-container {
  background: #fff;
  margin-top: 18px;
  height: 100%;
  min-height: calc(100vh - 68px);
  font-size: 12px
}

.app-container * {
  font-size: 12px;
}
</style>
